<template>
	<view class="">
		<u-popup :show="isShow" :customStyle="{
				background: '#fff',
				borderRadius:'38rpx 38rpx 0 0'
		}" @close="close" @open="open">
			<view class="explain_wrap">
				<image @click="isShow = false" class="close_icon" src="/static/common/close_icon.png" mode=""></image>
				<view class="title">{{title}}</view>
				<view class="content">{{content}}</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	const dataMap = new Map([
		['杠杆说明', '加强资金效应，提升收益可能性。高杠杆扩展交易影响力，务必细致评估。'],
		['累计收益率说明', '反映投资自开始以来总收益的百分比，是衡量长期表现的关键指标。'],
		['开仓保证金', '订单开始时需缴纳的保证金，以约定执行周期，订单周期完结时保证金退还，提前主动平仓则不退还。'],
		['预估服务费', '交易收益时预计将支付的服务费用，实际成本可能根据交易情况有所变动。'],
		['一键平仓', '即时关闭所有开仓交易的快速操作，用于迅速锁定当前持仓状态或止损。'],
	])
	export default {
		props: {

		},
		data() {
			return {
				isShow: false,
				title: '',
				content: ''
			};
		},
		mounted() {},
		methods: {
			show(key) {
				this.title = key;
				this.content = dataMap.get(key)
				this.isShow = true
			},
			close() {
				this.isShow = false
			},
			open() {

			}
		}
	}
</script>

<style scoped lang="scss">
	/deep/ .u-popup {
		position: fixed;
		z-index: 999;
	}

	.explain_wrap {
		padding: 70rpx 40rpx;
		position: relative;

		.title {
			font-weight: 600;
			font-size: 34rpx;
			color: #26282B;
			text-align: center;
		}

		.content {
			font-weight: 400;
			font-size: 30rpx;
			color: #26282B;
			margin-top: 30rpx;
			text-align: center;
		}

		.close_icon {
			position: absolute;
			top: 40rpx;
			right: 40rpx;
			width: 40rpx;
			height: 40rpx;
		}
	}
</style>